<script lang="tsx">
/**
 * 高德地图
 */
export default {
  name: "a-map"
}
</script>

<script lang="tsx" setup>
import {ref, onMounted} from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import {globalSetting} from "../../config/global-setting.ts"

/**
 * 定义props
 */
const props = withDefaults(defineProps<{
  lat?: string
  lon?: string
}>(), {
  lat: "121.5452899",
  lon: "29.8155706"
})

/**
 * 定义emit
 */
const emit = defineEmits<{
  (e: "click", data: any): void
}>()

/**
 * 地图实例
 */
const mapContainer = ref(null)
const map: any = ref(null)

/**
 * 挂载时运行
 */
onMounted(async () => {
  try {
    const AMap = await AMapLoader.load({
      key: globalSetting.mapKey,
      version: '2.0'
    })
    map.value = new AMap.Map(mapContainer.value, {
      viewMode: '3D',
      zoom: 15,
      center: [props.lat, props.lon]
    })
    map.value.on('click', handleClick)
  } catch (e) {
    console.error('AMap错误:', e)
  }
})

/**
 * 更改
 */
const handleClick = (value: any) => {
  emit("click", value)
}
</script>

<template>
  <div ref="mapContainer" class="map-box"></div>
</template>

<style lang="scss" scoped>
.map-box {
  width: 100%;
  height: 100%;
}
</style>